<template>
  <view class="page-container">
    <!-- 页面内容 -->
    <view class="content">
      <text>这是一个使用自定义 Tabbar 的示例页面</text>
      <text>当前页面：{{ currentPage }}</text>
    </view>

    <!-- 自定义 Tabbar -->
    <CustomTabbar />
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import CustomTabbar from './CustomTabbar.vue';

const currentPage = ref('');

// 获取当前页面信息
const getCurrentPageInfo = () => {
  const pages = getCurrentPages();
  if (pages.length > 0) {
    const currentPageInfo = pages[pages.length - 1];
    currentPage.value = currentPageInfo.route;
  }
};

onMounted(() => {
  getCurrentPageInfo();
});
</script>

<style lang="scss" scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
}
</style>
